<template>
    <view class="video-view">
        <!-- 播放器 -->
        <!-- 	:show-progress='false'
        :enable-progress-gesture='false' -->
        <video
            v-if="drama.playUrl"
            id="myVideo"
            class="video-content"
            :src="drama.playUrl"
            @play="play"
            @pause="pause"
            :initial-time="initial_time"
            :show-progress='false'
            :enable-progress-gesture='false'
            @loadedmetadata="loadedmetadata"
            @timeupdate="timeUpdate"
            @ended="handleVideoEnded"
            @touchmove.stop.prevent="handleTouchMove"
            @fullscreenchange="fullscreenchange"
            @click="togglePlay"
        >
        </video>
        <view class="progress-bar" :style="{ display: showProgressBar ? 'flex' : 'none' }">
            <text>{{ formatTime(currentTime) }}</text> 
            <view class="progress" :style="{ width: progress + '%' }"></view>
            <text class="right">{{formatTime( duration)  }}</text>
        </view>
        <view class="control-buttons" v-if="showControlButtons">
            <view class="button" @click="play" >
                <text>继续播放</text>
            </view>
            <view class="button" @click="replayVideo" >
                <text>重新播放</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        // 当前剧集
        drama: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
			isProcessing:false,//防止重复点击
            showControlButtons: false,
            progress: 0,
            initial_time:0,
            // 播放器上下文
            videoContext: undefined,
            // 播放状态
            isPlay: true,
            // 当前时长
            currentTime: 0,
            // 总时间
            duration: 0.1,
            // 是否正在拖拽进度
            isDrag: false,
            // 拖拽时视频时间
            dragStarTime: '',
            dragEndTime: '',
            // 当前还没显示过提示消息
            isShowMsg: true,
            isPlaying: false, 
            // 控制进度条显示
            showProgressBar: true
        }
    },
    watch: {
        drama: {
            handler(newValue, oldValue) {
                if(newValue.seekTime>0){
                    this.showControlButtons = true;
					if(this.videoContext){
						this.videoContext.pause()
					}
                }
            },
            deep: true
        }
    },
    mounted () {
        // 获取播放器上下文（后面的 this 需要传入，在微信小程序上无法暂停播放拖拽精度，所以需要传入这个）
        this.videoContext = uni.createVideoContext('myVideo', this)
    },
    methods: {
        //切换
        togglePlay() {
            if (this.isPlaying) {
                this.showControlButtons = true; //打开遮罩层
				if(this.videoContext){
					this.videoContext.pause(); // 如果正在播放，则暂停
				}
            } else {
                this.videoContext.play(); // 如果未播放，则播放
                this.showControlButtons = false; //打开遮罩层
            }
            this.isPlaying = !this.isPlaying; // 切换播放状态
        },
        // 播放结束
        handleVideoEnded() {
            this.showControlButtons = true;
        },
        handleTouchMove(e) {
            // 阻止默认的拖动行为
            e.stopPropagation(); // 阻止事件冒泡
            e.preventDefault(); // 阻止默认行为
        },
        // 播放
        play () {
            console.log('播放')
            this.videoContext.play()
            this.showControlButtons = false; //打开遮罩层
            this.$emit('play', 'play')
        },
        // 暂停
        pause () {
            console.log('暂停')
			// 防止重复点击
			    if (this.isProcessing) return;
			    
			    // 设置处理中状态
			    this.isProcessing = true;
			    
			    console.log('暂停');
			    this.videoContext.pause();
			    this.showControlButtons = true; // 打开遮罩层
			    this.$emit('play', 'pause');
			    
			    // 添加短暂延迟，防止UI闪烁，并确保操作完成后重置状态
			    setTimeout(() => {
			        this.isProcessing = false;
			    }, 300);
            
        },
        // 播放状态切换
        touchPlay () {
            this.isPlay = !this.isPlay
            if (this.isPlay) {
                this.play ()
            } else {
                this.pause()
            }
        },
        //全屏
        fullscreenchange(e) {
            const isFullscreen = e.detail.fullScreen;
            if (isFullscreen) {
                // 全屏时的处理逻辑
                console.log('进入全屏');
                this.showProgressBar = true;
            } else {
                // 退出全屏时的处理逻辑
                console.log('退出全屏');
                // 在iOS上，可能需要手动恢复屏幕方向
                // if (this.isIOS) {
                //   screen.orientation.lock('portrait-primary');
                // }
                this.showProgressBar = true;
            }
        },
        //重新播放
        replayVideo() {
            this.videoContext.seek(0);
            this.videoContext.play();
            this.showControlButtons = false;
        },
        // 播放进度发生变化
        timeUpdate (e) {
            // 拖拽时不需要进行更新
            this.showControlButtons = false; //打开遮罩层
            this.continueVideoButton = false//打开继续播放按钮
            if (!this.isDrag) {
                // 更新进度
                const { currentTime,duration } = e.detail
                this.currentTime = currentTime
                // // 播放完成
                if (Math.trunc(currentTime) === Math.trunc(this.duration)) {
                    this.$emit('playcomplete', e)
                }
                this.progress = (currentTime / duration) * 100;
                // 返回当前播放时间
                this.$emit('timeupdate', e)
            }
        },
        // 拖拽结束
        sliderChange (value) {
            // 停止拖拽
            this.isDrag = false
            // 判断一下是否大于基础时间
            if (this.duration > 0.1) {
                // 跳到指定时间点
                this.videoContext.seek(value)
                // 并调用播放
                this.play()
            }
        },
        // 正在拖拽
        sliderChanging (value) {
            // 开始拖拽
            this.isDrag = true
            // 刷新时间
            this.reloadVideoTime()
        },
        /** 本方法用于把秒转换为 mm:ss 的格式 */
        formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${minutes}:${secs < 10 ? "0" : ""}${secs}`;
        },
        // 刷新显示时间
        reloadVideoTime () {
            // 当前时间
            this.dragStarTime = this.$pub.TIME_CONVERT(this.currentTime)
            // 总时间
            this.dragEndTime = this.$pub.TIME_CONVERT(this.duration)
        },
        // 加载完成
        loadedmetadata (e) {
            const { duration } = e.detail
            // 记录视频总时间
            // 设置播放开始时间为3秒
            this.videoContext.seek(this.drama.seekTime);
            // this.videoContext.play()
            this.duration = duration
            // 回调
            this.$emit('loadcomplete')
        },
    }
}
</script>

<style lang="scss" scoped>
    .control-buttons {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .button {
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .button:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }
    .progress-bar {
        width: 70%;
        height: 4px;
        opacity: 0.8;
        background-color: #ccc;
        position: absolute;
        left: 160rpx;
        bottom: 40rpx;
        text{
            font-size: 24rpx;
            color: #cccc;
            margin-top: 4rpx;
        }
        .right{
            position: absolute;
            right: 10rpx;
        }
    }
    .progress {
        height: 4px;
        background-color: #ffcc00;
        position: absolute;
        left: 0;
        top: 0;
    }
    // ::v-deep .uni-video-container {
    //  background-color: transparent;
    // }

   .video-view {
        position: relative;
        width: 100%;
        height: 100%;
        // background-color: rgba(0,0,0,0.5); 
        // .video-view::after {
        //   content: "";
        //   position: absolute;
        //   top: 0; left: 0; right: 0; bottom: 0;
        //   background-color: rgba(0,0,0,0.5); /* 设置背景颜色和透明度 */
        //   z-index: -1; /* 确保背景在视频下方 */
        // }
       .video-content {
            border-radius: 40rpx;
            width: 100%;
            height: 100%;
            background-color: transparent;
        }
       .video-cover {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
           .view-cover-content {
                position: relative;
                width: 100%;
                height: 100%;
               .video-info {
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 246rpx;
                    background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.40) 100%, rgba(0,0,0,0.40) 100%);
                   .slider-view {
                        flex-shrink: 0;
                    }
                   .video-info-current {
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        width: 100%;
                        color: #fff;
                        font-size: 34rpx;
                        padding: 0 40rpx 40rpx;
                        width: calc(100% - 80rpx);
                       .video-info-btn {
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            padding-left: 40rpx;
                           .arrow-right-title {
                                margin-right: 10rpx;
                            }
                        }
                    }
                   .video-time {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 64rpx;
                        color: rgba(255, 255, 255, 0.7);
                       .video-time-current {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
</style>